<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div id="tips">距离双12还有xx天xx小时xx分xx秒</div>
</body>
<script>
    var tips = document.getElementById("tips");

    //  1. 从计时器开始设置,到第一次执行回调函数,需要先等待指定时间(1s) => 在这1s等待时间内  tips还是显示原本内容(真空期)

    // 页面加载时执行一次 
    // 倒计时
    // 获取结束时间 和 当前时间 -> 时间差

    var future = new Date("2022-12-12 00:00:00");
    var now = new Date();

    var time = future - now;  // 时间差
    time = parseInt(time / 1000); // 转化为 -> 秒
    console.log(time);

    // 你: 10000   同桌: 8000    => 1000/8000 = > 1.25

    // 总的时间 / 一天的时间 -> 天的倍数 
    var day = parseInt(time / (24 * 60 * 60));
    console.log(day);

    // 总的时间 % 一天的时间 -> 不满一天的时间
    // 不满一天的时间 / 一小时 -> 小时的倍数(不满一天)
    // var hour = parseInt(time % (24 * 60 * 60) / (60 * 60));
    // console.log(hour);

    // 总的时间 / 一小时 -> 小时的倍数(总的)
    // 总的小时数 % 24 => 不满一天的小时数
    var hour = parseInt(time / (60 * 60)) % 24;
    console.log(hour);

    // 总的时间 / 一分钟 -> 分钟的倍数(总的)
    // 总的分钟数 % 60 => 不满一小时的分钟数
    var minute = parseInt(time / 60) % 60;
    console.log(minute);

    var second = time % 60;
    console.log(second);


    tips.innerHTML = `距离双12还有${day}天${hour}小时${minute}分${second}秒`;

    setInterval(function () {  //  页面加载完毕 -> 1s后执行
        // 倒计时
        // 获取结束时间 和 当前时间 -> 时间差

        var future = new Date("2022-12-12 00:00:00");
        var now = new Date();

        var time = future - now;  // 时间差
        time = parseInt(time / 1000); // 转化为 -> 秒
        console.log(time);

        // 你: 10000   同桌: 8000    => 1000/8000 = > 1.25

        // 总的时间 / 一天的时间 -> 天的倍数 
        var day = parseInt(time / (24 * 60 * 60));
        console.log(day);

        // 总的时间 % 一天的时间 -> 不满一天的时间
        // 不满一天的时间 / 一小时 -> 小时的倍数(不满一天)
        // var hour = parseInt(time % (24 * 60 * 60) / (60 * 60));
        // console.log(hour);

        // 总的时间 / 一小时 -> 小时的倍数(总的)
        // 总的小时数 % 24 => 不满一天的小时数
        var hour = parseInt(time / (60 * 60)) % 24;
        console.log(hour);

        // 总的时间 / 一分钟 -> 分钟的倍数(总的)
        // 总的分钟数 % 60 => 不满一小时的分钟数
        var minute = parseInt(time / 60) % 60;
        console.log(minute);

        var second = time % 60;
        console.log(second);


        tips.innerHTML = `距离双12还有${day}天${hour}小时${minute}分${second}秒`;
    }, 1000)







</script>

</html>